<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .container {
        width: 100%;
    }
</style>
<style>
    .selectInput {
        position: relative;
        width: 100%;
        min-width: 100px;
    }

    .selectInput .flavorSelect {
        position: absolute;
        width: 100%;
        padding: 0 10px;
        border-radius: 3px;
        border: solid 1px #FF903D;
        line-height: 30px;
        text-align: center;
        background: #fff;
        top: 50px;
        z-index: 99;
    }

    .selectInput .flavorSelect .items {
        cursor: pointer;
        display: inline-block;
        width: 100%;
        line-height: 35px;
        border-bottom: solid 1px #f4f4f4;
        color: #666;
    }

    .selectInput .flavorSelect .none {
        font-size: 14px;
    }

    #food-add-app .uploadImg .el-form-item__label::before {
        content: '*';
        color: #F56C6C;
        margin-right: 4px;
    }
    .img-upload{
        position: absolute;
        top: 0;
        left: 0;
    }
</style>


<div id="food-add-app" class="addBrand-container">
    <div class="container">
        <form class="el-form demo-ruleForm el-form--inline">
            <div>
                <div class="el-form-item is-required">
                    <label for="name" class="el-form-item__label" style="width: 180px;">商品名称:</label>
                    <div class="el-form-item__content">
                        <div class="el-input">
                            <input type="text" autocomplete="off" id="itemNameId" placeholder="请填写商品名称" maxlength="20" class="el-input__inner">
                        </div>
                    </div>
                </div>
                <div class="el-form-item is-required"><label for="parentId" class="el-form-item__label" style="width: 180px;">商品分类:</label>
                    <div class="el-form-item__content">
                        <div class="el-select">
                            <div class="el-input el-input--suffix">
                                <input type="text" readonly="readonly" id="parentId" autocomplete="off" placeholder="请选择商品分类" class="el-input__inner load-sys-zTree">
                                <span class="el-input__suffix">
                                    <span class="el-input__suffix-inner">
                                        <i class="el-select__caret el-input__icon el-icon-arrow-up"></i>
                                    </span>
                                </span>
                            </div>
                            <div class="el-select-dropdown el-popper" style="display: none; min-width: 293px;">
                                <div class="el-scrollbar" style="display: none;">
                                    <div class="el-select-dropdown__wrap el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
                                        <ul class="el-scrollbar__view el-select-dropdown__list"></ul>
                                    </div>
                                    <div class="el-scrollbar__bar is-horizontal">
                                        <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                                    </div>
                                    <div class="el-scrollbar__bar is-vertical">
                                        <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                                    </div>
                                </div>
                                <p class="el-select-dropdown__empty">
                                    无数据
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="el-form-item is-required">
                    <label for="price" class="el-form-item__label" style="width: 180px;">商品价格:</label>
                    <div class="el-form-item__content">
                        <div class="el-input">
                            <input type="text" id="itemPriceId" placeholder="请设置商品价格" class="el-input__inner">
                        </div>
                    </div>
                    <label for="price" class="el-form-item__label" style="width: 189px;">商品标题:</label>
                    <div class="el-form-item__content">
                        <div class="el-input">
                            <input type="text" id="itemTitle" placeholder="请设置商品标题" class="el-input__inner">
                        </div>
                    </div>
                </div>
                <div class="el-form-item is-required">
                    <label for="price" class="el-form-item__label" style="width: 180px;">商品折扣:</label>
                    <div class="el-form-item__content">
                        <div class="el-input">
                            <input type="text" id="itemRebate" placeholder="请设置商品折扣" class="el-input__inner">
                        </div>
                    </div>
                    <label for="price" class="el-form-item__label" style="width: 189px;">商品库存:</label>
                    <div class="el-form-item__content">
                        <div class="el-input">
                            <input type="text" id="itemNum" placeholder="请设置商品库存" class="el-input__inner">
                        </div>
                    </div>
                </div>
            </div>
           <!-- <div class="el-form-item"><label class="el-form-item__label" style="width: 180px;">口味做法配置:</label>
                <div class="el-form-item__content">
                    <div class="el-form-item">
                        <div class="el-form-item__content">
                            <div class="flavorBox"><span class="addBut"> + 添加口味</span></div>
                        </div>
                    </div>
                </div>
            </div>-->
            <div></div>
            <div>
                <div class="el-form-item uploadImg"><label for="region" class="el-form-item__label" style="width: 180px;">菜品图片:</label>
                    <div class="el-form-item__content">
                        <div class="avatar-uploader">
                            <div tabindex="0" class="el-upload el-upload--text">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                                <input type="file" name="file" id="itemImgId" class="el-upload__input" onchange="upload()">
                            </div>
                        </div>
                        <div class="img-upload">
                            <img id="itemImg" style="display: none" width="261px" height="165px">
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="el-form-item uploadImg uploadLunBoImg"><label for="region" class="el-form-item__label" style="width: 180px;">商品轮播图(<span class="img-count">0</span>/3):</label>
                    <div class="el-form-item__content clearEl-form-item__content">
                        <div class="avatar-uploader">
                            <div tabindex="0" class="el-upload el-upload--text">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                                <input type="file" name="file" id="itemLuoBoImgId1" class="el-upload__input" onchange="uploadLunBo(this)">
                            </div>
                        </div>
                        <div class="img-upload">
                            <img class="itemImgLuoBo" style="display: none" width="261px" height="165px">
                        </div>
                    </div>
                </div>
            </div>
            <div class="address">
                <div class="el-form-item"><label for="region" class="el-form-item__label" style="width: 180px;">菜品描述:</label>
                    <div class="el-form-item__content">
                        <div class="el-textarea">
                            <textarea rows="3" id="itemNoteId" placeholder="菜品描述，最长200字" maxlength="200" class="el-textarea__inner" style="min-height: 33px;"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="subBox address">
                <div class="el-form-item">
                    <div class="el-form-item__content">
                        <button type="button" class="el-button el-button--default">
                            <span> 取消 </span>
                        </button>
                        <button type="button" class="el-button el-button--primary">
                            <span>保存 </span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
        <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="menuLayer" type="page" times="2" showtime="0" contype="object"
             style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 640px; display:none">
            <div class="layui-layer-title" style="cursor: move;">选择菜单</div>
            <div class="layui-layer-content" style="height: 358px;">
                <div style="padding: 10px;" class="layui-layer-wrap">
                    <ul id="menuTree" class="ztree"></ul>    <!-- 动态加载树 -->
                </div>
            </div>
            <span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
            <div class="layui-layer-btn layui-layer-btn-">
                <a class="layui-layer-btn0 btn-confirm">确定</a>
                <a class="layui-layer-btn1 btn-cancel">取消</a>
            </div>
        </div>
    </div>
</div>

<script src="api/food/food.js"></script>
<script type="text/javascript" src="../bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="../bower_components/layer/layer.js"></script>
<script>
    var zTree;
    var setting = {
        data:{
            simpleData:{
                //默认是false,把数据当做array，true会转json
                enable : true,
                idKey : "id",//菜单id
                pIdKey : "parentId",//父菜单is
                rootId : null //根节点
            }
        }
    };

    $(function(){
        $(".load-sys-zTree").on("click",zTreeMenu);//加载zTree树
        $(".el-button--default").on("click",backToItemList);//取消返回主界面
        $(".el-button--primary").on("click",saveAddOrUpdate);//添加或者修改
        var data = $("#cIframe").data("itemRow");
        if(data)doInitEditFormData($("#cIframe").data("itemRow"));
        $(".layui-layer-close,.btn-cancel").click(zTreeMenuHide)//取消
        $(".btn-confirm").click(choiceParentMenu);//确定
    })

    /**
     * 如果是修改的话拿到要填充的数据
     */
    function doInitEditFormData(data) {
        var imgDivs = $(".uploadLunBoImg .el-form-item__content");
        var imgList = [];
        var src = "";
        $(".clearEl-form-item__content").remove();
        debugger
        for (var i = 0; i < data.imgList.length; i++) {
          //  src = $(imgDivs[i]).find(".itemImgLuoBo").attr("src",data.imgList);
            $(".img-count").text(i +1);
            loadItemLuoBoImg(i);
            $("#itemImgLuoBo"+i).attr("src",data.imgList[i]);
        }
        imgCount = data.imgList.length;
        if(imgCount != 3){
            imgCount++;
            loadItemLuoBoImg(imgCount);
        }
        $("#itemNameId").val(data.itemName);
        $("#parentId").val(!data.sysCategory ? "" : data.sysCategory.name);
        $("#parentId").data("parentId",!data.sysCategory ? 0 : data.sysCategory.id);
        $("#itemPriceId").val(data.itemPrice);
        $("#itemRebate").val(data.itemRebate);
        $("#itemNum").val(data.itemNum);
        $("#itemTitle").val(data.itemTitle);
        $("#itemNoteId").val(data.itemNote);
        $("#itemImg").attr("src",data.itemImg);
        //$(".itemImgLuoBo").attr("src",data.imgList);
        $("#itemImg").show();
        $(".itemImgLuoBo").show();
    }

    /**
     * 保存添加或者修改结果
     */
    function saveAddOrUpdate() {
        var insertUrl = "item/saveItemData";//保存菜单url
        var updateUrl = "item/updateItemData";//修改
        var params = doGetEditFormData();
        var itemRow = $("#cIframe").data("itemRow");
        var url=itemRow?updateUrl:insertUrl;
        if(itemRow)params.id=itemRow.id;
        if (!params.itemName || !params.typeId || !params.itemPrice || !params.itemNote){
            commonShowTips("请将表单信息填写完整！！");
            return;
        }
        $.get(url, params, function(result) {
            if (result.state == 1) {
                commonShowTips(result.message);
                backToItemList();
            } else {
                commonShowTips(result.message);
            }
        })
    }

    /**
     *表单数据封装
     */
    function doGetEditFormData() {
        var imgDivs = $(".uploadLunBoImg .el-form-item__content");
        var imgList = [];
        var src = "";
        for (var i = 0; i < imgDivs.length; i++) {
            src = $(imgDivs[i]).find(".itemImgLuoBo").attr("src");
            if (src == "" || src == null) {

            } else {
                imgList.push(src)
            }
        }
        var params={
            itemName : $("#itemNameId").val(),
            typeId : $("#parentId").data("parentId"),
            itemPrice : $("#itemPriceId").val(),
            itemTitle : $("#itemTitle").val(),
            itemImg : $("#itemImg").attr("src"),//file
            itemNote : $("#itemNoteId").val(),
            itemRebate : $("#itemRebate").val(),
            itemNum : $("#itemNum").val(),
            imgList : imgList,
        }
        return params;
    }

    /**
     * 返回商品集合主界面
     */
    function backToItemList() {
        //把绑定的id清空
        $("#cIframe").data("itemRow","");
        $("#cIframe").load("item/list");
    }
    var imgCount = 1;
    /**
     * 上传轮播图片
     */
    function uploadLunBo(btn) {
        var obj = $(btn);
        var uploadLunBoFile = obj.get(0).files[0];
        var formData = new FormData();
        //key的名字自定义，value为文件控件对象
        formData.append("file",uploadLunBoFile);
        $.ajax({
            url:"upload/upload",
            data:formData,
            dateType:"json",
            type:"post",
            //提交参数之前是否把参数转换为字符串：true--是，false--不是，默认是true
            processData:false,
            //提交之前，是否把参数统一按URLEncoded编码:true--是，false--不是，默认是true
            contentType:false,
            success:function(result){
                debugger;
                obj.parent().parent().next().children("img").attr("src",result);
                obj.parent().parent().next().children("img").show();
                $(".img-count").text(imgCount);
                if (imgCount < 3) {
                    imgCount++;
                    loadItemLuoBoImg(imgCount);
                }
            }
        })
    }

    function loadItemLuoBoImg(i) {
        var luoboImg = "<div class='el-form-item__content'>" +
            "<div class='avatar-uploader'>" +
            "<div tabindex='0' class='el-upload el-upload--text'>" +
            "<i class='el-icon-plus avatar-uploader-icon'></i>" +
            "<input type='file' name='file' id='itemLuoBoImgId" + i + "' class='el-upload__input' onchange='uploadLunBo(this)'>" +
            "</div>" +
            "</div>" +
            "<div class=\"img-upload\">" +
            "<img class='itemImgLuoBo' style='display: none' width='261px' height='165px' id='itemImgLuoBo" + i + "' "+
            "</div>" +
            "</div>";
        $(".uploadLunBoImg").append(luoboImg);
    }

    /**
     * 上传图片
     */
    function upload(){
       // var fileName = $("#itemImgId").val();//file
        var uploadFile = $("#itemImgId").get(0).files[0];
        var formData = new FormData();
        //key的名字自定义，value为文件控件对象
        formData.append("file",uploadFile);
        $.ajax({
            url:"upload/upload",
            data:formData,
            dateType:"json",
            type:"post",
            //提交参数之前是否把参数转换为字符串：true--是，false--不是，默认是true
            processData:false,
            //提交之前，是否把参数统一按URLEncoded编码:true--是，false--不是，默认是true
            contentType:false,
            success:function(result){
                $("#itemImg").attr("src",result);
                $("#itemImg").show();
            }
        })
    }


    /**
     * 选择父菜单，并把父菜单名填写进去
     */
    function choiceParentMenu(){
        var selects = zTree.getSelectedNodes();//获取被选中的节点集合
        if(!selects.length){
            commonShowTips("未选中父菜单");
            return
        }
        $("#parentId").val(selects[0].name);//把父菜单名填写进去
        $("#parentId").data("parentId",selects[0].id);
        zTreeMenuHide();//隐藏
    }

    /**
     * 隐藏zTree树
     */
    function zTreeMenuHide(){
        $("#menuLayer").hide();
    }

    /**
     * 加载zTree树
     */
    function zTreeMenu(){
        var url = "category/findZtreeCategory";
        $.get(url,{},function(result){
            zTree = $.fn.zTree.init($("#menuTree"),setting,result.data);
            zTree.expandAll(true);
            $("#menuLayer").css("display","block");
        })
    }
</script>